<template>
    <div class="content">
        <div class="main">
            <div class="main-box">
                <div class="bjcl">本月行驶里程TOP5</div>
                <div id="bycl"  class="echart"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: 'App',
  data() {
    return {}
  },
  mounted: function () {
    this.$nextTick(function () {
      this.getPie()
    })
  },
  methods: {
    getPie() {
      // 绘制图表
      var myChart1 = echarts.init(document.getElementById('bycl'))
      // 指定图表的配置项和数据
      var option1 = {
        legend: {
          show: false,
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            color: ['#0089ff', '#25f3e6', '#af89d6', '#f5c847', '#ff999a',],
            radius: [13, 65],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 4
            },
            startAngle: 240,
            data: [
              { value: 10, name: 'NO.1' },
              { value: 2, name: 'NO.5' },
              { value: 4, name: 'NO.4' },
              { value: 5, name: 'NO.3' },
              { value: 7, name: 'NO.2' },
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      // myChart.setOption(option)
      myChart1.setOption(option1)
    }
  }

}
</script>
<style scoped lang="less">
.content {
    position: relative;
    box-sizing: border-box;
    background-color: rgba(15, 32, 95, 0.7);
}

.main-box {
    position: absolute;
    height: 175px;
    width: calc(100%-4px);
    background-image:
        url("../assets/picture/bj-1.png"),
        url("../assets/picture/bj-2.png"),
        url("../assets/picture/bj-4.png"),
        url("../assets/picture/bj-3.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    z-index: 1;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: -2px;
}

.main {
    height: 175px;
    width: 100%;
    border: 1px solid #1723b0;
}

.echart {
    position: absolute;
    left: 21px;
    top: 27px;
    width: 255px;
     height: 150px
}
.bjcl{
    position: absolute;
    top: 5px;
    left: 9px;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
}
</style>